<template>
    <div class="content">
        <Form ref="formValidate" :model="form" :label-width="80">
            <div class="formBox" style="margin-bottom:20px">
                <div class="formBox-item">
                    <FormItem label="筛选时间">
                        <cus-cascadeDate
                            :startTime.sync="form.startTime"
                            :endTime.sync="form.endTime"
                        ></cus-cascadeDate>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="供应商:" prop="name">
                        <Input v-model="form.name" maxlength=20 clearable placeholder="请输入供应商" style="width: 200px">
                        </Input>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="供应种类:" prop="type">
                        <Select v-model="form.type" style="width:200px" placeholder="请选择供应种类" clearable>
                            <Option value="1">种类1</Option>
                            <Option value="2">种类2</Option>
                            <Option value="3">种类3</Option>
                        </Select>
                    </FormItem>
                </div>
                <cusButton class="mr_20" type="primary" @onClick="onInit()">查询</cusButton>
                <cusButton class="mr_20" type="primary" @onClick="reset()">重置</cusButton>
            </div>
        </Form>
        <div class="content-bottom">
            <div class="btnBox">
                <cusButton class="mr_20" type="primary" @onClick="onAdd()" ghost>添加</cusButton>
                <cusButton class="mr_20" type="primary" @onClick="onImport()">导入</cusButton>
                <cusButton type="primary" @onClick="onExport()">导出</cusButton>
            </div>
            <div class="tableBox">
                <Table border :loading="loading" :columns="columns" :data="data">
                    <template slot-scope="{ row }" slot="operation">
                        <div class="flex">
                            <cus-button type="text" size="small" :style="{color: '#1E6FFF',padding: '0 8px'}" @onClick="onEdit(row)">
                                编辑
                            </cus-button>
                            <Poptip
                                confirm
                                transfer
                                placement="left"
                                :title="`是否确认禁用 ${ row.name } ？`"
                                @on-ok="onClose(row)">
                                <cus-button type="text" size="small" :style="{color: '#FF4746',padding: '0 8px'}" v-if="row.status == 1">
                                    禁用
                                </cus-button>
                            </Poptip>
                            <Poptip
                                confirm
                                transfer
                                placement="left"
                                :title="`是否确认启用 ${ row.name } ？`"
                                @on-ok="onOpen(row)">
                                <cus-button type="text" size="small" :style="{color: 'green',padding: '0 8px'}" v-if="row.status == 0">
                                    启用
                                </cus-button>
                            </Poptip>
                        </div>
                    </template>
                </Table>
                <div style="width: 100%;display: flex;justify-content: flex-end">
                    <cus-page :data="pages" class="mt_10" @pageChange="getRowMealListApi"></cus-page>
                </div>
            </div>
        </div>
        <!-- 导入 -->
        <cus-uploadModal ref="cusUploadNutritionTagModal" 
            :temp-src="exportNutritionTagTemp" 
            :uploadFnc="uploadNutritionTag"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            @onOk="onInit"></cus-uploadModal>
        <!-- 添加、编辑 -->
        <addSupplyModal ref="addSupplyModal"></addSupplyModal>
    </div>
</template>

<script>
import {
    uploadNutritionTag
} from '@/api/business/baseManage';
import addSupplyModal from "./components/addSupplyModal";
export default {
    components: { addSupplyModal },
    data() {
        return {
            ruleValidate: {},
            form: {
                name: '', // 供应商
                type: '', // 供应种类
                startTime: "",
                endTime: "",
            },
            exportNutritionTagTemp: '', // 下载模板地址
            uploadNutritionTag: uploadNutritionTag,
            importName: '',
            loading: false,
            data: [
                { name: '伙食费标准', num: 32.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 },
                { name: '其他伙食标准', num: 1.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '军粮定量', num: 2.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 },
                { name: '粮食补助', num: 32, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '燃料费', num: 32.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 0 },
                { name: '调料费', num: 50.6, code: 9697, username: 'admin', time: '2022-11-30', id: 99, status: 1 }
            ],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '供应商编码',
                    key: 'code',
                    align: 'center'
                },
                {
                    title: '供应商名称',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '供应种类',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '联系人',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '联系电话',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '地址',
                    key: 'price',
                    align: 'center'
                },
                {
                    title: '邮箱',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'time',
                    align: 'center'
                },
                {
                    title: '状态',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '操作',
                    fixed: 'right',
                    slot: 'operation',
                    align: 'center'
                },
            ],
            pages: {
                page: 1,
                pageSize: 20,
                pageTotal: 0
            },
        };
    },
    mounted() {
        
    },
    methods: {
        // 初始化
        onInit() {},
        // 重置搜索
        reset() {
            this.$refs['formValidate'].resetFields();
            this.onInit();
        },
        // 导出
        onExport() {},
        // 添加
        onAdd() {
            this.$refs['addSupplyModal'].show()
        },
        // 导入
        onImport() {
            this.$refs['cusUploadNutritionTagModal'].show()
        },
        // 编辑
        onEdit(row) {
            this.$refs['addSupplyModal'].form.id = row.id;
            this.$refs['addSupplyModal'].show();
        },
    },
};
</script>
<style scoped>
/deep/.ivu-input-icon {
    height: 40px!important;
    line-height: 40px!important;
}
</style>
<style lang="less" scoped>
    .content {
        padding: 20px;
        &-bottom {
            background: #fff;
            border-radius: 4px;
            box-shadow: 1px 1px 2px 0px rgba(153,182,199,0.2); 
            padding: 20px;
        }
    }

    .formBox {
        width: 100%;
        background: #fff;
        border-radius: 4px;
        box-shadow: 1px 1px 2px 0px rgba(153,182,199,0.2);
        padding: 20px 20px 1px;
        display: flex;
        flex-wrap: wrap;
        &-item {
            margin-right: 48px;
        }
    }
    .mr_20 {
        margin-right: 20px;
    }

    .btnBox {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }
</style>
